<template>
    <div class="container">
        <Header @changelang="changeLanguage"></Header>
        <div class="homecontent" style="padding-bottom:200px;min-width:1200px;">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in bannerlist" :key="index">
                        <a :href="item.bannerImgHref">
                        <img :src="item.bannerImgUrl">
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="layer activitybar clearfix" style="display:none">
                <div class="activityitem" v-for="(item,index) in bannerlist" :key="index" @click="changeSlide(index+1)" :class="current==index+1?'active':''" v-show="current<5 && index<4">
                    <div v-if="index<4">
                        <span class="itemnum">0{{index+1}}</span>
                        <p class="itemtitle" :title="item.title">{{item.title}}</p>
                        <p class="itemtext" :title="item.content">{{item.content}}</p>
                    </div>
                </div>
                <div class="activityitem" v-for="(item,index) in bannerlist" :key="'list'+index" @click="changeSlide(index+1)" :class="current==index+1?'active':''" v-show="current>=5 && index>=4">
                    <div v-if="index>=4">
                        <span class="itemnum">0{{index+1}}</span>
                        <p class="itemtitle" :title="item.title">{{item.title}}</p>
                        <p class="itemtext" :title="item.content">{{item.content}}</p>
                    </div>
                </div>
            </div>
            <div class="layer activitybar clearfix">
                <div class="pairbar clearfix">
                    <div v-for="(item,index) in topsymbols" :key="index">
                        <router-link :to="{path:'/trade', query: {symbol: item.symbol}}" class="pairitem">
                            <p class="pairname">{{item.baseCurrency}}/{{item.quoteCurrency}}<span class="gain" :class="item.changeFor24H >= 0 ? 'up' : 'down'">{{item.ticker}}</span></p>
                            <p class="pairprice">{{item.close}}<span>≈￥{{item.closeCny.toFixed(4)}}</span></p>
                            <p class="turnover">{{$t('l.trade_13')}}：<span>{{item.volume}} {{item.baseCurrency}}</span></p>
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="bulletin">
                <div class="layer clearfix">
                    <span class="fl horn"><img src="../assets/images/bulico.png"></span>
                    <router-link to="/announcement" class="fr more">{{$t('l.home_1')}} ></router-link>
                    <div class="marqueebar">
                        <ul class="newslist" :class="{move:animate}">
                            <li v-for="(item,index) in marqueeList" :key="index">
                                <div @click="detailsMessage(item.id)" v-if="index<3"><a :title="item.title">{{item.title}}</a><span v-show="item.isshowtime">{{item.createTime}}</span><i v-show="!item.isshowtime"></i></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="layer">

                <div class="marketbar">
                    <div class="markethead clearfix">
                        <div class="marketclass clearfix">
                            <a class="marketname" :class="currencyMarket=='optional'?'active':''" @click="checkMarket('optional')">{{$t('l.home_3')}}{{this.$store.state.count}}</a>
                            <!-- <a class="marketname" :class="currencyMarket=='DIC'?'active':''" @click="checkMarket('DIC')">DIC{{$t('l.home_4')}}</a> -->
                            <a class="marketname" :class="currencyMarket=='USDT'?'active':''" @click="checkMarket('USDT')">USDT{{$t('l.home_4')}}</a>
                            <a class="marketname" :class="currencyMarket=='BTC'?'active':''?'active':''" @click="checkMarket('BTC')">BTC{{$t('l.home_4')}}</a>
                            <a class="marketname" :class="currencyMarket=='ETH'?'active':''" @click="checkMarket('ETH')">ETH{{$t('l.home_4')}}</a>

                        </div>
                        <div class="querycoin">
                            <i></i>
                            <input :placeholder="$t('l.home_5')" v-model="likecoin">
                        </div>
                    </div>
                    <div class="areabar clearfix">
                        <a class="areaitem" :class="currencyRegions=='A'?'active':''" @click="checkRegions('A')">{{$t('l.home_6')}}</a>
                        <a class="areaitem" :class="currencyRegions=='P'?'active':''" @click="checkRegions('P')">{{$t('l.home_7')}}</a>
                        <a class="areaitem" :class="currencyRegions=='O'?'active':''" @click="checkRegions('O')">{{$t('l.home_8')}}</a>
                        <a class="areaitem" :class="currencyRegions=='I'?'active':''" @click="checkRegions('I')">{{$t('l.home_9')}}</a>
                        <a class="areaitem" :class="currencyRegions=='B'?'active':''" @click="checkRegions('B')">{{$t('l.home_10')}}</a>
                    </div>
                    <table class="marketlist">
                        <thead>
                            <tr>
                                <th class="sortable wid15" :class="{'up':sortStr=='CODE' && isUp,'down':sortStr=='CODE' && !isUp}" @click="sortOrder('CODE')">{{$t('l.home_4')}}</th>
                                <th class="sortable wid5" :class="{'up':sortStr=='CODE' && isUp,'down':sortStr=='CODE' && !isUp}" @click="sortOrder('CODE')">{{$t('l.home_11')}}</th>
                                <th class="sortable wid20" :class="{'up':sortStr=='PRICE' && isUp,'down':sortStr=='PRICE' && !isUp}" @click="sortOrder('PRICE')">{{$t('l.home_12')}}</th>
                                <th class="sortable wid10" :class="{'up':sortStr=='RATE' && isUp,'down':sortStr=='RATE' && !isUp}" @click="sortOrder('RATE')">{{$t('l.home_13')}}</th>
                                <th class="sortable wid15" :class="{'up':sortStr=='HIGH' && isUp,'down':sortStr=='HIGH' && !isUp}" @click="sortOrder('HIGH')">{{$t('l.home_14')}}</th>
                                <th class="sortable wid15" :class="{'up':sortStr=='LOW' && isUp,'down':sortStr=='LOW' && !isUp}" @click="sortOrder('LOW')">{{$t('l.home_15')}}</th>
                                <th class="sortable wid20" :class="{'up':sortStr=='VOL' && isUp,'down':sortStr=='VOL' && !isUp}" @click="sortOrder('VOL')">{{$t('l.home_16')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in currentQuotes" :key="index" v-show="currencyMarket!=='optional' && item.symbol.includes(likecoin.toUpperCase()) || currencyMarket=='optional' && item.active" @click="linktrade(item.symbol)">
                                <td class="wid15">
                                    <i class="keep" :class="item.active == true  ? 'active' :''" @click.stop="sendSymbol(item.active,item.baseCurrency+item.quoteCurrency)"></i>
                                    {{item.baseCurrency}}/{{item.quoteCurrency}}
                                    <i class="abbrev" :class="{zhu:item.currencyPairRegion=='P',kai:item.currencyPairRegion=='O',chuang:item.currencyPairRegion=='I',chao:item.currencyPairRegion=='B'}"></i>
                                </td>
                                <td class="wid5">{{item.baseCurrency}}</td>
                                <td class="wid20"><span class="pricecc">{{item.close}}</span><span class="cny">≈ ¥{{item.closeCny.toFixed(4)}}</span></td>
                                <td class="wid10"><a :class="item.changeFor24H >= 0 ? 'up' : 'down'">{{item.ticker}}</a></td>
                                <td class="wid15">{{item.high}}</td>
                                <td class="wid15">{{item.low}}</td>
                                <td class="wid20">{{item.volume}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <Footer></Footer>

        <div class="popWraper" v-show="!isWarning">
            <div class="popInter">
                <div class="popHead">
                    <h2>{{$t('l.home_17')}}</h2>
                    <i class="close" @click="closepop"></i>
                </div>
                <div class="popbody">
                    <div class="popcon">
                        <div class="vvbtcurl">
                            <i></i>
                            <input value="http://flcrotu.cn/">
                        </div>
                        <div class="warningbox">
                            <img src="../assets/images/tip1.png" width="24px" class="fl">
                            <div class="warningcon">
                                <h2>{{$t('l.home_18')}}</h2>
                                <p>{{$t('l.home_19')}}</p>
                            </div>
                        </div>
                        <a class="btn allcell" @click="closepop" style="margin:0 auto;width:292px;">{{$t('l.home_22')}}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="downapp" v-show="isShowdownapp">
            <i @click="isShowdownapp=false"></i>
            <router-link to="/h5/download">
                <img src="../assets/images/downapp.png" width="100%">
            </router-link>
        </div>
    </div>
</template>

<style lang="less">
.container{
    position:relative;
    min-height:100%;
    min-width: 1200px;
    background:rgba(238,240,247,1);
    background: #e5ebf5;
    .downapp{
        position:fixed;
        bottom:0;
        z-index: 9999;
        width:100%;
        i{
            position:absolute;
            top: 10px;
            right: 20px;
            width: 59px;
            height: 59px;
            background:url(../assets/images/closedown.png) no-repeat center;
            background-size:39px 39px;
        }
    }
    .popWraper .popInter{
        width:596px;
        top: 25%;
    }
    .btnbox{
        padding-top:38px;
        .btn.cancel{background:none;border:1px solid rgba(221,224,235,1);color:#33385E;}
    }
    .vvbtcurl{
        padding:0 10px;
        height:48px;
        border-radius:4px;
        border:1px solid rgba(221,224,235,1);
        box-sizing: border-box;
        i{
            float:left;
            width:16px;
            height:22px;
            margin-top: 12px;
            background:url(../assets/images/lockico.png) no-repeat center;
        }
        input{
            color:rgba(51,56,94,1);
            line-height:48px;
            width:90%;
            overflow:hidden;
            padding-left:16px;
            font-size:16px;
        }
    }
    .warningbox{
        min-height:130px;
        background:rgba(255,251,230,1);
        border-radius:4px;
        border:1px solid rgba(255,229,143,1);
        padding-top:16px;
        padding-left:24px;
        padding-right:50px;
        box-sizing: border-box;
        position:relative;
        margin-top:24px;
        margin-bottom:34px;
        .warningcon{
            overflow:hidden;
            padding-left:16px;
            h2{
                font-size:16px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:rgba(0,0,0,0.85);
                line-height:24px;
                padding-bottom:4px;
            }
            p{
                color:rgba(0,0,0,0.65);
                line-height:22px;
            }
        }
    }
    .swiper-container{
        height:540px;
        .swiper-slide{
            overflow:hidden;
            img{
                position: absolute;
                top:0;
                left:50%;
                margin-left:-1280px;
                min-height:100%;
            }
        }
    }
    .activitybar{
        position: relative;
        margin-top: -117px;
        z-index: 9;
        height: 117px;
        box-shadow:0px 4px 38px 0px rgba(4,28,112,0.11);
        background: #f1f2f7;
        border-radius: 4px 4px 0 0;
        .activityitem{
            float:left;
            width:25%;
            padding:28px 46px;
            background:#fff;
            overflow:hidden;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
            height: 92px;
            &.active{
                .itemnum{
                    background:linear-gradient(360deg,rgba(86,86,255,1) 0%,rgba(200,192,236,1) 100%);
                    color:#fff;
                }
            }
            &:hover{
                .itemtitle,.itemtext{
                    color: #2D8DFE;
                }
            }
            .itemnum{
                float:left;
                width:48px;
                height:48px;
                border-radius:50%;
                background:rgba(242,246,250,1);
                text-align:center;
                line-height:48px;
                margin-right:20px;
                color:rgba(114, 120, 151, 1);
                font-size:26px;
                font-familyA:"Roboto-Medium";
                margin-top:-8px;
            }
            .itemtitle{
                font-size:18px;
                color:rgba(51, 51, 51, 1);
                line-height:100%;
                padding-bottom:8px;
                font-weight:500;
                font-familyA:"PingFangSC-Medium";
                white-space: nowrap;
            }
            .itemtext{
                font-size:14px;
                color:rgba(102, 102, 102, 1);
                line-height:100%;
                font-weight:400;
                height: 28px;
                overflow: hidden;
                width: 140px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            &:after{
                content:"";
                position:absolute;
                right:0;
                top:22px;
                width:1px;
                height:53px;
                background:rgba(216, 216, 216, 1);
            }
            &:last-child{
                &:after{
                    content:"";
                    width:0;
                }
            }
        }
    }
    .bulletin{
        height:60px;
        width:100%;
        background:#fff;
        .horn{
            width:60px;
            height:60px;
            line-height:60px;
        }
        .more{
            line-height:60px;
            font-size:14px;
            color:rgba(98, 103, 136, 1);
            cursor:pointer;
        }
        .marqueebar{
            overflow:hidden;
            position:relative;
            height: 30px;
            top: 15px;
            .newslist{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                &.move{
                    transition:all 0.5s;
                    margin-top:-30px;
                }
                li{
                    line-height:30px;
                    cursor:pointer;
                    float:left;
                    padding-left:10%;
                    &:first-child{
                        padding-left:0;
                    }
                    div{
                        display:block;
                        a{
                            display:inline-block;
                            vertical-align: middle;
                            white-space: nowrap;
                            color:#626788;
                        }
                        span{
                            display:inline-block;
                            vertical-align: middle;
                            color:#626788;
                        }
                        i{
                            display:inline-block;
                            vertical-align: middle;
                            width:30px;
                            height:15px;
                            margin-left:2px;
                            background:url(../assets/images/new.png) no-repeat center;
                        }
                    }
                }
            }
        }

    }
    .pairbar{
        margin-top:0px;
        background:url(../assets/images/topbg.png) no-repeat center;
        background-size:100% 100%;
        >div:first-child {
            .pairitem::before {
                display: none;
            }
        }
        .pairitem{
            float:left;
            width:20%;
            height:117px;
            box-sizing: border-box;
            padding:17px 23px 22px;
            position:relative;
            &::before {
                position: absolute;
                content: "";
                width:1px;
                height:70px;
                background:rgba(216,216,216,1);
                left: 0;
                top: 30px;
            }
            .pairname{
                font-size:18px;
                color:#2D8DFE;
                line-height:100%;
                font-weight:600;
                span{
                    font-size:18px;
                    color:rgba(13, 168, 139, 1);
                    line-height:100%;
                    float:right;
                    &.up{
                        color:rgba(13, 168, 139, 1);
                    }
                    &.down{
                        color:#ef5756;
                    }
                }
            }
            .pairprice{
                padding-top:15px;
                font-size:16px;
                color:#2D8DFE;
                line-height: 100%;
                span{
                    padding-left:10px;
                    font-size:12px;
                    color:#9ca9b5;
                    line-height:100%;
                }
            }
            .turnover{
                padding-top:10px;
                font-size:14px;
                color:rgba(32, 32, 76, 0.43);
                line-height:100%;
                font-familyA:"PingFangSC-Medium";
                span{
                    font-familyA:"OpenSans-Semibold";
                }
            }
            &:after{
                content:'';
                position:absolute;
                right:0;
                top:30px;
                width:1px;
                height:70px;
                background:rgba(216, 216, 216, 1);
            }
            &:last-child:after{
                content:'';
                display:none;
            }
        }
    }
    .marketbar{
        margin-top:24px;
        background:rgba(255,255,255,1);
        box-shadow:0px 2px 7px 0px rgba(0,0,0,0.09);
        border-radius:2px;
        .markethead{
            height:62px;
            // background:linear-gradient(180deg,rgba(250,250,253,1) 0%,rgba(242,243,250,1) 100%);
            background: #f2f6fa;
            .marketclass{
                float:left;
                .marketname{
                    float:left;
                    width:100px;
                    line-height:62px;
                    font-size:14px;
                    color:rgba(98, 103, 136, 1);
                    font-weight:500;
                    text-align:center;
                    cursor:pointer;
                    font-family:"PingFangSC-Medium";
                    &.active{
                        background:#fff;
                        color:#2D8DFE;
                        border-top:2px solid #2D8DFE;
                    }
                }
            }
            .querycoin{
                float:right;
                width:180px;
                height:30px;
                border:1px solid rgba(225,226,233,1);
                border-radius:6px;
                margin-top:16px;
                margin-right:20px;
                i{
                    float:left;
                    width:15px;
                    height:15px;
                    background:url(../assets/images/search.png) no-repeat center;
                    margin-left:12px;
                    margin-right:14px;
                    margin-top:8px;
                }
                input{
                    border:none;
                    outline:none;
                    background:none;
                    line-height:30px;
                    width:138px;
                    font-weight:400;
                    font-size:14px;
                    color:rgba(98, 103, 136, 1);
                }
            }
        }
        .areabar{
            padding:15px 32px;
            background:#fff;
            border-bottom:1px solid rgba(236, 240, 245, 1);
            .areaitem{
                float:left;
                min-width:80px;
                height:30px;
                line-height:30px;
                text-align:center;
                font-size:14px;
                color:rgba(98, 103, 136, 1);
                margin-right:20px;
                border-radius:10px;
                box-shadow: inset 2px 2px 10px rgba(179, 179, 179, 0.5);
                cursor:pointer;
                &.active{
                    background: #2D8DFE;
                    background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
                    color:#fff;
                }
            }
        }
        .marketlist{
            width:100%;
            thead{
                padding:0 32px;
                display:block;
                width: 100%;
                box-sizing: border-box;
                tr{
                    display:block;
                    border-bottom:1px solid rgba(236, 240, 245, 1);
                    overflow:hidden;
                    .sortable{
                        float:left;
                        position:relative;
                        box-sizing: border-box;
                        font-size:12px;
                        color:rgba(98, 103, 136, 1);
                        line-height:40px;
                        text-align:right;
                        padding-right:15px;
                        cursor: pointer;
                        &.wid5{width:5%;}
                        &.wid10{width:10%;}
                        &.wid15{width:15%;}
                        &.wid20{
                            width:20%;

                        }
                        &:first-child{
                            text-align:left;
                            padding-left:26px;
                            &:after{
                                content:"";
                                right:105px;
                            }
                        }
                        &:after{
                            content:"";
                            position:absolute;
                            right:0;
                            top:0;
                            height:40px;
                            width:12px;
                            background:url(../assets/images/arrow.png) no-repeat center;
                        }
                        &.up:after{
                            content:"";
                            background:url(../assets/images/arrow_up.png) no-repeat center;
                        }
                        &.down:after{
                            content:"";
                            background:url(../assets/images/arrow_down.png) no-repeat center;
                        }
                    }
                }
            }
            tbody{
                display:block;
                tr{
                    display:block;
                    padding:0 32px;
                    overflow:hidden;
                    cursor: pointer;
                    &:hover{
                        // background:rgba(245, 247, 255, 1);
                        background-color: rgba(242,246,250,.7);
                        transition: background-color .5s .1s
                    }
                    td{
                        float:left;
                        box-sizing: border-box;
                        line-height:50px;
                        text-align:right;
                        font-size:14px;
                        color:rgba(51, 56, 94, 1);
                        font-weight:400;
                        border-bottom:1px solid rgba(242, 246, 250, 1);
                        font-family:"OpenSans-Semibold";
                        &.wid5{width:5%;}
                        &.wid10{width:10%;}
                        &.wid15{width:15%;}
                        &.wid20{
                            width:20%;
                        }
                        &:first-child{
                            text-align:left;
                            text-align: left;
                            font-size: 15px;
                            font-weight: 500;
                        }
                        .keep{
                            display:inline-block;
                            vertical-align:middle;
                            margin-right:10px;
                            width:14px;
                            height:14px;
                            background:url(../assets/images/start.png) no-repeat center;
                            &.active{
                                background: url(../assets/images/level.png) no-repeat center;
                            }
                        }
                        .abbrev{
                            display:inline-block;
                            vertical-align:middle;
                            margin-left:8px;
                            width:18px;
                            height:18px;
                            &.zhu{background:url(../assets/images/zhu.png) no-repeat center;}
                            &.kai{background:url(../assets/images/kai.png) no-repeat center;}
                            &.chuang{background:url(../assets/images/chuang.png) no-repeat center;}
                            &.chao{background:url(../assets/images/chao.png) no-repeat center;}
                        }
                        .pricecc{
                            font-size: 14px;
                            line-height: 1.1;
                            display: block;
                            padding-top: 13px;
                        }
                        .cny{
                            font-size:12px;
                            color:#9ca9b5;
                            line-height:100%;
                            display: block;
                            padding-bottom: 10px;
                        }
                        .down{
                            display:inline-block;
                            width:86px;
                            height:28px;
                            background:rgba(239,87,86,0.12);
                            border-radius:2px;
                            line-height:28px;
                            text-align:center;
                            color:rgba(239, 87, 86, 1);
                            font-size:14px;
                            font-weight:400;
                            color: #ef5656;
                            background-color: rgba(239,86,86,.1)
                            // font-family:"OpenSans-Semibold";
                        }
                        .up{
                            display:inline-block;
                            width:86px;
                            height:28px;
                            background:rgba(13, 168, 139, 0.12);
                            border-radius:2px;
                            line-height:28px;
                            text-align:center;
                            color:rgba(13, 168, 139, 1);
                            font-size:14px;
                            font-weight:400;
                            color: #0da88b;
                            background-color: rgba(13,168,139,.1);
                            // font-family:"OpenSans-Semibold";
                        }
                    }
                }
            }
        }
    }
}
</style>

<script>
import Header from "../components/header";
import Footer from "../components/footer";
import Swiper from 'swiper';
import {api} from '@/api/api';
import 'swiper/dist/css/swiper.css';
// import wsmsg from "../../static/messages"

// require("../assets/js/qiyukf");

export default {
    components: {
        Header,
        Footer
    },
    data () {
        return {
            btcTradings : [] ,
            usdtTradings : [] ,
            ethTradings : [] ,
            hkdtTradings : [] ,
            optTradings : [] ,
            currencyMarket:"USDT",//当前市场
            currencyRegions:"A",//当前分区
            regions : ["USDT","BTC","ETH","ALC","USDA"],//交易分区
            masterData:[],//所有数据
            quotes:[],//
            currentQuotes:[],
            current:0,
            mySwiper:"",
            animate:false,
            marqueeList:[],
            marqueeListnnewToken:[],
            marqueeListnews:[],
            bannerlist:[],
            isWarning:false,
            likecoin:"",
            topsymbols:[],
            sortStr:'',
            isUp:false,
            topobj:"",
            isShowdownapp:false
        }
    },
    created(){
        this.getloginSource();
        this.getBanner();
        this.isWarning = localStorage.getItem('isWarning')?localStorage.getItem('isWarning'):false;

        let usertoken = this.$store.state.usertoken;
        if(usertoken){
            this.checkLogin(usertoken,true,true,true,false);
        }
        //this.baseinfo();
    },
    watch:{
        bannerlist:function(){
            this.$nextTick(function(){
                let that = this;
                that.mySwiper = new Swiper ('.swiper-container', {
                    loop : true,
                    effect : 'fade',
                    fadeEffect: {
                        crossFade: true,
                    },
                    autoplay: {
                        stopOnLastSlide: false,
                        disableOnInteraction:false
                    },
                    on: {
                        slideChangeTransitionEnd: function(){
                            if(this.activeIndex<=that.bannerlist.length){
                                that.current = this.activeIndex;
                            }else{
                                that.current = 1;
                            }

                        },
                    },
                })
            })
        },

    },
    methods:{
        changeLanguage(data){
            this.getAnnouncementList();
            this.getBanner();
        },
        linktrade(symbol){
            let that = this;
            that.$router.push({
              path: "/trade",
              query: {symbol: symbol}
            });
        },
        closepop(){
            let that = this;
            that.isWarning = true;
            localStorage.setItem("isWarning",true);
        },
        // showMarquee: function () {
        //     this.animate = true;
        //     setTimeout(()=>{
        //         this.marqueeList.push(this.marqueeList[0]);
        //         this.marqueeList.shift();
        //         this.animate = false;
        //     },500)
        // },
        //基本信息
        async baseinfo(){
            let that = this;
            let res = await api.baseinfo()
            if(res.data.code==0){
                let usertoken = that.$store.state.usertoken;
                if(usertoken){
                    that.checkLogin(usertoken,true,true,true,false);
                }
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        checkMarket(market){
            let that = this;
            that.currencyMarket = market;
            that.loadData(that.currencyMarket);
        },
        checkRegions(region){
            let that = this;
            that.currencyRegions = region;
            that.currentQuotes = [];
            that.quotes.forEach((item,index)=>{
                if(that.currencyRegions=='A'){
                    that.currentQuotes.push(item);
                }else if(that.currencyRegions==region && item.currencyPairRegion==region){
                    that.currentQuotes.push(item);
                }
            })
        },
        loadData(e){
            let that = this;
            that.win$.wsmsg.sendWsMsg({
                watchList : wsmsg.WatchListRequest.create(that.win$.wsmsg.addRequestId({
                    watch : (e == "optional")
                }))
            })

            if (e != "optional") {
                that.topobj = wsmsg.SymbolListRequest.create(that.win$.wsmsg.addRequestId({
                    currencyRegion:'TOP'
                }))
                that.win$.wsmsg.sendWsMsg({
                    symbolList:that.topobj
                })
                that.win$.wsmsg.sendWsMsg({
                    symbolList: wsmsg.SymbolListRequest.create(that.win$.wsmsg.addRequestId({
                        region: e,
                        watch: true
                    }))
                })
            }
        },
        checkLogin(token,includeUser,includeAccount,reqAccountUpdate,hasFundOnly){
            let that = this;
            if(token != null && token != undefined && token != ''){
                that.win$.wsmsg.sendWsMsg({userLogin: wsmsg.UserLoginRequest.create(that.win$.wsmsg.addRequestId({
                            token : token,
                            includeUser : includeUser ,
                            includeAccount : includeAccount ,
                            reqAccountUpdate : reqAccountUpdate ,
                            hasFundOnly : hasFundOnly
                        }))});
            }
        },
        wscomeback(masterData, regions, msg){
            let that = this;
            switch (msg.constructor.name) {
                case 'UserLoginResponse':
                    that.loadData(that.currencyMarket);
                    break;
                case 'MasterDataResponse':
                    var pairs = msg.pairs;
                    var currencies = msg.currencies;
                    var useRegion = [];
                    pairs.forEach(function(elt) {
                        for (var i = 0; i < currencies.length; i++) {
                            if (currencies[i].currencyId === elt.baseCurrencyId) {
                                elt.region = currencies[i].region;
                                elt.precision = currencies[i].precision;
                                that.masterData.push(elt);
                            }
                            //regions.forEach(function(code) {
                                // if(openRegion){
                                //     if(elt.currencyRegion=="O"&&elt.symbol.endsWith(code)){
                                //         if(useRegion.length==0)
                                //             useRegion.push(code)
                                //         else{
                                //             if(useRegion[useRegion.length-1]!=code)
                                //             useRegion.push(code)
                                //         }
                                //     }
                                // }else
                                    // if(elt.symbol.endsWith(code)){
                                    //     if(useRegion.length==0)
                                    //         useRegion.push(code)
                                    //     else{
                                    //         if(useRegion[useRegion.length-1]!=code)
                                    //         useRegion.push(code)
                                    //     }
                                    // }
                            //});
                        }
                    });
                    break;
                case 'WatchListResponse':
                    var Tradings = msg.quotes;
                    that.optTradings = [];
                    for (var i = 0; i < Tradings.length; i++) {
                        var quote = Tradings[i];
                        var symbol = Tradings[i].symbol;
                        if (quote.open == 0) {
                            var ticker = 0;
                        } else {
                            var ticker = ((quote.price - quote.open) / quote.open); // 涨跌幅
                            ticker = (ticker*100).toFixed(2)
                        }
                        if (ticker > 0) {
                            quote.ticker = '+' + ticker + '%';
                            quote.U = true ;
                        } else if (ticker < 0) {
                            quote.ticker = ticker + '%';
                            quote.D = true ;
                        } else {
                            quote.ticker = ticker + '%';
                        }
                        //小数精确位处理
                        masterData.forEach(function(e) {
                            if (e.symbol == quote.symbol) {
                                quote.currencyRegion = e.currencyRegion;
                                quote.volume = that.toNonExponential(Number(quote.volume).toFixed(e.precision));
                                quote.low = that.toNonExponential(Number(quote.low).toFixed(e.precision));
                                quote.close = that.toNonExponential(Number(quote.close).toFixed(e.precision));
                                quote.high = that.toNonExponential(Number(quote.high).toFixed(e.precision));
                                quote.open = that.toNonExponential(Number(quote.open).toFixed(e.precision));
                            }
                        });
                        regions.forEach(function(code) {
                            if (symbol.endsWith(code)) {
                                quote.baseCurrency = symbol.replace(code, '').toUpperCase() ; // 基础币种
                                quote.quoteCurrency = code; // 计价币种
                            }
                        });
                        that.optTradings.push(quote) ;

                    }
                    that.currentQuotes.forEach((item,index)=>{
                        let flag = false;
                        that.optTradings.forEach((ntem,ndex)=>{
                            if(item.symbol==ntem.symbol){
                                flag = true
                            }
                        })
                        if(flag){
                            item.active = true
                        }else{
                            item.active = false
                        }
                    })
                    // Vue.set(app, "optTradings", optTradings);
                    // /* 曲线数据 */
                    // optTradings.forEach(function(quote) {
                    //     lineRequest(quote.symbol);
                    // });
                    // $("#optTradings").show();
                    //that.quotes = optTradings;
                    break;
                case 'SymbolListResponse':
                    //if(that.topobj.requestId !== msg.requestId){
                        that.pullTradings(masterData, msg.region, msg.quotes,msg.requestId);
                        that.checkRegions(that.currencyRegions);
                    //}
                    break;
                case 'WatchListEditResponse':
                        var is = false;
                        if(msg.code==2010018){
                            that.$layer.msg(this.$t('l.home_20'));
                            return;
                        }
                        if(msg.quotes.length > 0){
                            is = true;
                        }
                        that.win$.wsmsg.sendWsMsg({
                            watchList : wsmsg.WatchListRequest.create(that.win$.wsmsg.addRequestId({
                                watch : false
                            }))
                        });
                        if (is)
                            window.setTimeout(function(){
                                that.updateTrading(masterData, regions, msg.quotes[0]);
                            },1000);
                    break;
                /* 订阅行情 */
                case 'QuoteUpdateResponse':
                    that.updateTrading(masterData, regions, msg.quote);
                    break;
            }
        },
        pullTradings(masterData, region, quotes,requestId) {
            let that = this;
            var tradings = [];
            that.quotes = [];
            if(that.topobj.requestId == requestId){
                that.topsymbols = [];
            }
            for (var i = 0; i < quotes.length; i++) {
                var quote = quotes[i];
                var symbol = quote.symbol.trim();
                that.optTradings.forEach(function(elt, i, array) {
                    if (symbol === elt.symbol) {
                        quote.active = true;
                    }
                });
                if (quote.open == 0) {
                    var ticker = 0;
                } else {
                    var ticker = ((quote.price - quote.open) / quote.open); // 涨跌幅
                    ticker = (ticker*100).toFixed(2);
                }
                if (ticker > 0) {
                    quote.ticker = '+' + ticker + '%';
                    quote.U = true ;
                } else if (ticker < 0) {
                    quote.ticker = ticker + '%';
                    quote.D = true ;
                } else {
                    quote.ticker = ticker + '%';
                }
                quote.changeFor24H = ticker;
                quote.baseCurrency = symbol.replace(region, '').toUpperCase() ; // 基础币种
                //小数精确位处理
                masterData.forEach(function(e) {
                    if (e.symbol == quote.symbol) {
                        quote.currencyPairRegion = e.currencyPairRegion;
                        quote.volume = parseInt(that.toNonExponential(Number(quote.volume)));
                        quote.low = that.toNonExponential(Number(quote.low).toFixed(e.precision));
                        quote.close = that.toNonExponential(Number(quote.close).toFixed(e.priceDisplayDp));
                        quote.high = that.toNonExponential(Number(quote.high).toFixed(e.precision));
                        quote.open = that.toNonExponential(Number(quote.open).toFixed(e.precision));
                        quote.recommend = e.recommend;
                    }
                });
                quote.quoteCurrency = region; // 计价币种
                quote.symbol = symbol;

                if(that.topobj.requestId == requestId){
                    let flag = false;
                    that.regions.forEach((item,index)=>{
                        if(symbol.endsWith(item)){
                            quote.quoteCurrency = item.toUpperCase();
                            quote.baseCurrency = symbol.replace(item, '').toUpperCase() ;
                        }
                    })
                    that.topsymbols.forEach((item,index)=>{
                        if(item.symbol==quote.symbol){
                            flag = true
                        }
                    })
                    if(!flag || that.topsymbols.length==0){
                        if(that.topsymbols.length<5){
                            that.topsymbols.push(quote);
                        }
                    }
                }else{
                    that.quotes.push(quote) ;
                }
                // if(region==""){
                //     that.regions.forEach((item,index)=>{
                //         if(symbol.replace(item, '')!==symbol){
                //             quote.baseCurrency = symbol.replace(region, '').toUpperCase() ; // 基础币种
                //         }
                //     })
                // }
            }
            //that.quotes = tradings;
            //that.$set(that.quotes,tradings);
        },
        updateTrading(masterData, regions, quote) {
            let that = this;
            if (quote != null && quote != 'defined') {
                var symbol = quote.symbol;
                    that.optTradings.forEach((item,index)=>{
                        if(symbol === item.symbol){
                            quote.active = true;
                        }
                    })
                if (quote.open == 0) {
                    var ticker = 0;
                } else {
                    var ticker = ((quote.price - quote.open) / quote.open); // 涨跌幅
                    ticker = (ticker*100).toFixed(2)
                }
                if (ticker > 0) {
                    quote.ticker = '+' + ticker + '%';
                    quote.U = true ;
                } else if (ticker < 0) {
                    quote.ticker = ticker + '%';
                    quote.D = true ;
                } else {
                    quote.ticker = ticker + '%';
                }
                regions.forEach(function(code) {
                    if (symbol.endsWith(code)) {
                        quote.baseCurrency = symbol.replace(code, '').toUpperCase() ; // 基础币种
                        quote.quoteCurrency = code; // 计价币种
                    }
                });
                quote.changeFor24H = ticker;
                //小数精确位处理
                masterData.forEach(function(e) {
                    if (e.symbol == quote.symbol) {
                        quote.currencyPairRegion = e.currencyPairRegion;
                        quote.volume = that.toNonExponential(Number(quote.volume).toFixed(e.precision));
                        quote.low = that.toNonExponential(Number(quote.low).toFixed(e.precision));
                        quote.close = that.toNonExponential(Number(quote.close).toFixed(e.precision));
                        quote.high = that.toNonExponential(Number(quote.high).toFixed(e.precision));
                        quote.open = that.toNonExponential(Number(quote.open).toFixed(e.precision));
                        quote.recommend = e.recommend;
                    }
                });
                that.quotes.forEach((item,index)=>{
                    if(item.symbol==quote.symbol){
                        //item = quote;
                        that.$set(that.quotes,index,quote);
                    }
                })
                that.topsymbols.forEach((item,index)=>{
                    if(item.symbol==quote.symbol){
                        //item = quote;
                        quote.volume = parseInt(quote.volume);
                        that.$set(that.topsymbols,index,quote);
                    }
                })
                that.checkRegions(that.currencyRegions);
            }
        },
        /* 取消科学计数 */
        toNonExponential(num) {
            var num = new Number(num);
            var m = num.toExponential().match(/\d(?:\.(\d*))?e([+-]\d+)/);
            return num.toFixed(Math.max(0, (m[1] || '').length - m[2]));
        },
        changeSlide(n){
            this.mySwiper.slideTo(n, 1000, false)
            this.current = n
        },
        async getAnnouncementList() {
            let that = this;
            let params = {
                pageNum: 1,
                pageSize: 10000,
                typeCode: "announcementCenter"
            };
            let res = await api.announcementList(params);
            if (res.data.code == 0) {
                that.marqueeList = [];
                res.data.data.records.forEach((item,index)=>{
                    let nowtime = new Date().getTime();
                    let createtime = new Date(item.createTime).getTime();
                    if((nowtime-createtime)>1000*60*60*24*3){
                        item.isshowtime = true;
                    }else{
                        item.isshowtime = false
                    }
                    that.marqueeList.push(item);
                })
            } else {
                this.$layer.msg(res.data.msg);
            }
        },
        linkDetailPage(articleId, type, typeCode) {
            this.$router.push({
                path: "/articleDetails",
                query: {
                articleId,
                type,
                typeCode
                }
            });
        },
        async getBanner() {
            let that = this;
            let params = {
                category: 1,
                platform: 1
            };
            let res = await api.bannerList(params);
            if (res.data.code == 0) {
                that.bannerlist = [];
                res.data.data.forEach((item,index)=>{
                    that.bannerlist.push(item);
                })
            } else {
                this.$layer.msg(res.data.msg);
            }
        },
        sortOrder(sort){
            let that = this;
            that.sortStr = sort;
            that.isUp = !that.isUp;
            that.win$.wsmsg.sendWsMsg({
                symbolList: wsmsg.SymbolListRequest.create(that.win$.wsmsg.addRequestId({
                    region: that.currencyMarket,
                    watch: true,
                    orderBy:sort,
                    order:that.isUp?'ASC':'DESC'
                }))
            })

        },
        detailsMessage(id){
            this.$router.push(`/articleDetails?articleId=${id}`);
        },
        sendSymbol(isWatch,symbol){
            let that = this;
            var symbols = [];
            let RequestId = 0;
            symbols.push(symbol);
            var master = that.win$.wsmsg.addRequestId({
                symbols : symbols,
                add : !isWatch
            });
            if (isWatch) {
                RequestId = master.requestId * 10;
            } else {
                RequestId = master.requestId * 30;
            }
            that.win$.wsmsg.sendWsMsg({
                watchEdit : wsmsg.WatchListEditRequest.create(master)
            });
        },
        //判断当前终端
        getloginSource(){
            let that = this;
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                that.isShowdownapp = true;
            }
        },
    },
    mounted(){
        let that = this;

         //主流分区
        that.masterData = [];
        /* websocket请求数据返回 处理*/
        that.win$.wsmsg.setOnWsMsg(function (msg) {
            //layer.msg(msg);
            if (msg.code == 403) {
                //;
                that.$layer.msg(this.$t('l.home_21'));
                // console.log('msg ', msg.message);
                //$("#login_out_a_id").click();
                return false;
            }
            that.wscomeback(that.masterData, that.regions, msg);
        })
        /* 获取分区 */
        that.win$.wsmsg.sendWsMsg({masterData: wsmsg.MasterDataRequest.create(that.win$.wsmsg.addRequestId({}))});

        /* 页面初始订阅 */
        that.loadData(that.currencyMarket);
        /* 新闻列表 */
        that.getAnnouncementList();
    }
}
</script>
